<template>
    <div class="common-layout">
      <el-container class="el-container">
        <el-header class="header">
        <div :class="{'header-container':true,'scroll-header':scrollHeader}">
        <div class="logo-container" >
        <img src="..\assets\images\logo.gif" />
        </div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            text-color="black"
            active-text-color="#ee9d26"
        >

          <el-menu-item index="/AllMain"  @click="$router.push('/')">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>机场信息</template>
            <el-sub-menu index="2-1">
              <template #title>离港航班</template>
              <el-menu-item index="2-2" @click="$router.push({name:'inFlight'})">离港中转航班</el-menu-item>
              <el-menu-item index="2-3" @click="$router.push('/inFlightNext')">离港直达航班</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3-1">
              <template #title>进港航班</template>
              <el-menu-item index="3-2" @click="$router.push({name:'abroadFlight'})">进港中转航班</el-menu-item>
              <el-menu-item index="3-3" @click="$router.push({name:'abroadFlightNext'})">进港直达航班</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="4" @click="$router.push({name:'CheckedLuggage'})">行李托运</el-menu-item>
          <el-menu-item index="5">辅助工具</el-menu-item>
          <el-menu-item index="6">联系我们</el-menu-item>
          <el-menu-item index="/login"  @click="$router.push({name:'login'})">登录/注册</el-menu-item>
          </el-menu>
        </div>
        

        </el-header>
        <el-main style="padding: 0px">
  
          <div class="card-container" style="position: absolute;margin: -155px 0 0 60px;">
            <el-card class="box-card" style="height: 150px">
              <div class="txt">快速航班查询</div>
  
              <el-form ref="form" :model="form" >
                <el-form-item class="date-select">
                  <!--                        <label>日期</label>-->
                  <el-date-picker
                      type="date"
                      placeholder="请选择日期"
                      v-model="form.ddtm"
                      @change="updateDateTime"
                  ></el-date-picker>
                </el-form-item>
                <el-input
                    class="elInner"
                    placeholder="请输入航班号"
                    style="width: 180px"
                    v-model="form.fide"
                ></el-input>
                  <!-- <el-input
                      class="elInner"
                      placeholder="请输入行李编号"
                      style="width: 120px"
                      v-model="form.code"
                  ></el-input> -->
                <el-button class="btn1" type="primary" @click="onSubmit">
                  <el-icon><Search /></el-icon> 查询</el-button
                >
              </el-form>
  
            </el-card>
          </div>
  
          <div class="common-layout">
            <el-container>
              <el-main>
                <el-button type="danger" @click="addLuggage">托运行李</el-button>
                <el-table
                    ref="singleTable"
                    border
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    class="tableStyle"
                >
                  <el-table-column property="fide" label="航班号" width="150">
                  </el-table-column>
                  <!-- <el-table-column property="btno" label="行李提取转盘序号" width="150">
                  </el-table-column>
                  <el-table-column property="code" label="行李提取转盘编号" width="100">
                  </el-table-column> -->
                  <el-table-column property="ddtm" label="日期" width="280">
                  </el-table-column>
                  <el-table-column
                      property="estr"
                      label="预计起飞时间"
                      width="280"
                  >
                  </el-table-column>
                  <el-table-column
                      property="rstr"
                      label="实际起飞"
                      width="280"
                  >
                  </el-table-column>
                </el-table>
                <el-pagination
                    class="tableStyle"
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :current-page="page"
                    :pageCount="pageCount"
                    @current-change="changePage"
                >
                </el-pagination>
              </el-main>
            </el-container>
          </div>
        </el-main>
        <el-footer style="padding: 0 0">
          <div class="bottombar-container">
            <div class="content">
              <div class="box">
                <dl>
                  <dt>航班信息</dt>
                  <dd>出发航班</dd>
                  <dd>到达航班</dd>
                </dl>
              </div>
              <div class="box">
                <dl>
                  <dt>交通指南</dt>
                  <dd>停车场</dd>
                  <dd>市区班车</dd>
                  <dd>旅客直通车</dd>
                  <dd>出租车</dd>
                  <dd>摆渡车</dd>
                </dl>
              </div>
              <div class="box">
                <dl>
                  <dt>机场周边</dt>
                  <dd>美食服务</dd>
                  <dd>旅游景区</dd>
                </dl>
              </div>
              <div class="box">
                <dl>
                  <dt>旅客须知</dt>
                  <dd>乘机指南</dd>
                  <dd>爱心服务</dd>
                  <dd>失物招领</dd>
                  <dd>常用电话</dd>
                </dl>
              </div>
              <div class="box">
                <dl>
                  <dt>航班延误</dt>
                  <dd>联系我们</dd>
                  <dd>改签退票</dd>
                </dl>
              </div>
              <div class="box last">
                <dl>
                  <dt>关注我们</dt>
                  <dd>
                    <img src="/src/assets/images/gongzhonghao.png" alt="" />
                  </dd>
                  <dd>微信添加公众号</dd>
                </dl>
              </div>
            </div>
          </div>
        </el-footer>
        
      </el-container>

      <!-- 行李托运编辑的内容部分弹窗 -->
      <el-dialog v-model="dialogVisible" width="70%">
            <h2 style="text-align: center;margin-bottom: 20px;">行李托运</h2>
            <el-form
                :model="luggage"
                label-width="120px"
                :size="formSize"
                id="luggageForm"
                :rules="rules"
                ref="luggageForm"
            >
                <el-form-item label="姓名" prop="username" required>
                    <el-input v-model="luggage.username"/>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone" required>
                    <el-input v-model="luggage.phone" type="number"/>
                </el-form-item>
                <el-form-item label="邮寄地址" prop="address" required>
                    <el-input v-model="luggage.address" />
                </el-form-item>
                <el-form-item label="取件地址" prop="home" required>
                    <el-input v-model="luggage.home" />
                </el-form-item>
                <el-form-item label="预约取件时间" prop="time" required>
                    <el-col :span="13">
                        <el-date-picker
                            type="datetime"
                            placeholder="选择日期"
                            v-model="luggage.time"
                            style="width: 200px"
                            format="YYYY-MM-DD HH:mm:ss">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <footer style="width: 204px;margin: 0 auto;">
                <span class="dialog-footer">
                  <el-button @click="cancel"> 取消 </el-button>
                  <el-button @click="reset">重置</el-button>
                  <el-button type="primary" @click="accept"> 确认 </el-button>
                </span>
            </footer>
        </el-dialog>
    </div>
</template>
<script>
import { ElMessageBox } from 'element-plus'
export default {
    name: "CheckedLuggage",
    data() {
      return {
        dialogVisible:true,
        selectLabel: 0,
        tableDataType: 1,
        formLabelWidth: "120px", //表单文本宽度
        tableData: [{}],
        count: 0, //记录总数
        page: 1, //当前页码
        pageCount: "", //总页数
        categoryData: "",
        images: [
          { id: 1, url: "/src/assets/images/img_1.png" },
          { id: 2, url: "/src/assets/images/img_2.png" },
        ],
        form: {
          ddtm: "",
          fide: "",
          btno: "",
          code: "",
          estr: "",
          eend: "",
          rstr: "",
          rend: "",
        },
        luggage: {
            username: "",
            phone: "",
            address: "",
            home: "",
            time: "",
        },
        rules: {
            username: [
                {required: true, message: "请输入用户名", trigger: "blur"}, 
                {
                    min: 2,
                    max: 14,
                    message: '请输入正确的姓名',
                    trigger: 'blur'
                }
            ],
            phone: [
                {required: true, message: "请输入电话号码", trigger: "blur"}, 
                {
                    min: 11,
                    max: 11,
                    message: '手机号码为11位数请检查',
                    trigger: 'blur'}
            ],
            address: [
                {required: true, message: "请输入邮寄地址", trigger: "blur"}, 
                {
                    min: 5,
                    max: 120,
                    message: '请检查邮寄地址是否正确',
                    trigger: 'blur'}
            ],
            home: [
                {required: true, message: "请输入取件地址", trigger: "blur"}, 
                {
                    min: 5,
                    max: 120,
                    message: '请检查取件地址是否正确',
                    trigger: 'blur'}
            ],
            time: [
                {required: true, message: "请选择预约时间", trigger: "blur"}, 
                // {
                //     min: 1,
                //     message: '未选择时间',
                //     trigger: 'blur'}
            ],


      },
      }
    },
    methods: {
      changePage(currentPage) {
        this.page = currentPage;
        switch (this.tableDataType) {
          case 1:
            this.fetchData();
            break;
          case 2:
            this.onSubmit();
            break;
        }
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.flag === 1) {
          return "orange-text";
        }
        if (row.flag === 2) {
          return "red-text";
        }
        return "";
      },
      handleScroll(){
        // 获取滚动的垂直位置
        const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 判断滚动位置是否超过表头的位置
        this.scrollHeader = scrollY > 100 // 这里的 值 是一个示例的值，请根据实际情况调整
        const header = document.querySelector('.header-container')
  
        if (this.scrollHeader) {
          header.classList.add('scroll-header')
        } else {
          header.classList.remove('scroll-header')
        }
        // 可根据需要添加其他样式的修改逻辑
      },
  
      combiningStrings(date){
        var mon= date.substring(4,7);
        var year = date.substring(11,15);
        var day = date.substring(8,10);
        switch (mon) {
          case"Jan":
            mon="01";
            break;
          case "Feb":
            mon="02";
            break;
          case "Mar":
            mon="03";
            break;
          case "Apr":
            mon="04";
            break;
          case "May":
            mon="05";
            break;
          case "Jun":
            mon="06";
            break;
          case "Jul":
            mon="07";
            break;
          case "Aug":
            mon="08";
            break;
          case "Sep":
            mon="09";
            break;
          case "Oct":
            mon="10";
            break;
          case "Nov":
            mon="11";
            break;
          case "Dec":
            mon="12";
            break;
        }
        let combineDate =(year+mon+day);
        return combineDate;
      },
  
      onSubmit(form){
        var ddtm = this.combiningStrings(this.form.ddtm.toString());
        var fide=this.form.fide;
        var code=this.form.code;
        const pageNum = this.page;
        const pageSize = 10; // 设置每页显示的数据条数
        this.$axios
            .get("http://localhost:8888/DfmeBase/searchLuggage", {params: {code,fide,ddtm, pageNum, pageSize}})
            .then((response) => {
              const result = response.data.data;
              this.count = result.size;
              this.pageCount = Math.ceil(result.total / 10);
              this.tableData = result.list;
              if(response.data.status==10000){
                this.tableDataType=2;
                this.$message.success({
                  type:"success",
                  message:"查询成功"
                })
                this.called=true;
              } else {
                this.tableDataType=1;
                this.$message.error({
                  type:"error",
                  message:"查询失败，没有数据"
                })
  
              }
  
            })
            .catch(() => {
              console.error(error);
            });
      },
        handleEdit(number,role) {
            
        },
        edit(){
        
        },
        addLuggage(){
          this.dialogVisible=true;
        },
        accept(){
            this.$refs.luggageForm.validate(isValid => {
                if (isValid) {
                    this.$message.error("暂未开放");
                    console.log(this.luggage);
                    this.dialogVisible=false;
                    this.reset();
                }
            })
        },
        cancel(){
          this.dialogVisible=false;
          this.reset();
        },
        reset(){
            this.luggage={
                username:"",
                phone:"",
                address:"",
                home:"",
                time:"",
            }
        }
    },
    mounted() {
      this.onSubmit();
    },
    beforeUnmount() {
      // 在组件销毁前移除滚动事件监听
      window.removeEventListener('scroll', this.handleScroll)
    },
  };
  </script>

<style scoped>
.main {
    height: 100%;
    background-color: #184789;
}
.el-menu-demo{
    background-color: transparent !important;
    color: #fff;
    width: 600px;
    position: absolute;
    top: 30px;
    right: 60px;
    border: none;
    z-index: 2;
  }
  .logo-container {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2; /* 调整logo容器的层级 */
  }
  .header-container{
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    z-index: 2;
  }
  .scroll-header{
    height: 85px;
    background-color: #fff;
    transition: height 0.5s ease, background-color 0.5s ease;
  }
  .header {
    /*background-color: blue;*/
    /* 给头部设置一下弹性布局 */
    display: flex;
    /* 让它贴标左右对齐 */
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    /*background: rgba(0, 0, 0, 0.39);*/
    position: relative;
    background-image:url('../assets/images/bgfly7.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 570px;
  }
  .tableStyle {
    /*margin-left: 110px;*/
  }
  .card-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .txt{
    font-size: 20px;
    font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 52px;
    padding-right: 20px;
    display: inline-block;
  }
  .box-card {
    width: 900px;
    height: 90px;
  }
  
  
  .elInner {
    display: inline-block;
    position: relative;
    bottom: 52px;
    right: 358px;
    float:right;
    font-size: 14px;
    font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
    font-weight: 700;
    color: #2b2b2b;
    border: 1px solid #dcdfe6;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    transition: border-color.2s cubic-bezier(.645,.045,.355,1);
  }
  .btn1{
    display: inline-block;
    position: relative;
    left: 590px;
    bottom: 52px;
    width: 200px;
    color: #184789;
  }
  
  .bottombar-container {
    min-width: 1120px;
    overflow: hidden;
    background: #184789;
    padding-bottom: 30px;
    position: relative;
  }
  .content {
    width: 1120px;
    margin: 0 auto;
    padding-right: 40px;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
  }
  .box {
    width: 160px;
    /*color: white;*/
  }
  .bottombar-container .content .box dt {
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: 700;
    color: white;
    line-height: 22px;
    margin-bottom: 23px;
  }
  
  dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .bottombar-container .content .box dd {
    margin: 0;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #fff;
    line-height: 18px;
    margin-bottom: 12px;
    cursor: pointer;
  }
  .bottombar-container .content .box dd img {
    width: 122px;
    height: 122px;
  }
</style>
  